<template>
  <main class="content-child">
    <h2>时间日期</h2>
    <right class="right_component" :data="data"></right>
  </main>
</template>
<script>
import Right from "../components/Right";
export default {
  name: "DateTime",
  components: {
    Right,
  },
  data() {
    return {
      msg: [
        {
          name: "123",
        },
      ],
      data: [
        {
          name: "样式一",
          time: "0.2",
          img: "../../static/images/date_time/1.png",
          code: `
            <ion-item>
              <ion-label>Date</ion-label>
              <ion-datetime displayFormat="YYYY" [(ngModel)]="myDate"></ion-datetime>
            </ion-item>
          `
        }, {
          name: "样式二",
          time: "0.2",
          img: "../../static/images/date_time/2.png",
          code: `
            <ion-item>
              <ion-label>Date</ion-label>
              <ion-datetime displayFormat="MM/YY" [(ngModel)]="myDate"></ion-datetime>
            </ion-item>
          `
        }, {
          name: "样式三",
          time: "0.2",
          img: "../../static/images/date_time/3.png",
          code: `
            <ion-item>
              <ion-label>Date</ion-label>
              <ion-datetime displayFormat="DD/MM/YY" [(ngModel)]="myDate"></ion-datetime>
            </ion-item>
          `
        }, {
          name: "样式四",
          time: "0.2",
          img: "../../static/images/date_time/4.png",
          code: `
            <ion-item>
              <ion-label>Date</ion-label>
              <ion-datetime displayFormat="D/MM/YYYY" [(ngModel)]="myDate"></ion-datetime>
            </ion-item>
          `
        }, {
          name: "样式五",
          time: "0.2",
          img: "../../static/images/date_time/5.png",
          code: `
            <ion-item>
              <ion-label>Date</ion-label>
              <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="myDate"></ion-datetime>
            </ion-item>
          `
        }, {
          name: "样式六",
          time: "0.2",
          img: "../../static/images/date_time/7.png",
          code: `
            <ion-item>
              <ion-label>Date</ion-label>
              <ion-datetime displayFormat="HH:mm" [(ngModel)]="myDate"></ion-datetime>
            </ion-item>
          `
        }, {
          name: "样式七",
          time: "0.2",
          img: "../../static/images/date_time/8.png",
          code: `
            <ion-item>
              <ion-label>Date</ion-label>
              <ion-datetime displayFormat="mm" minuteValues="[0,15,30,45]" [(ngModel)]="myDate"></ion-datetime>
            </ion-item>
          `
        },
      ],
    };
  },
};
</script>
<style scoped lang="less">
.content-child {
  text-align: left;
  width: 800px;
}
.right {
  padding-left: 1rem;
}
</style>
